<template>
	<view class="nas-home">
		<view v-if="accountStatus == 3">
			<!-- tv顶部栏 -->
			<view class="nas-home-top" v-if="title === '' && !showBottomMore">
				<view class="tv-home-top-left">
					<view class="tv-left-img"><image src="/static/tv-static/tv-logo.svg" mode=""></image></view>
					<view class="tv-left-two">
						<view class="nas-home-top-title"><image src="/static/tv-static/tv-logo-title.svg" mode=""></image></view>
						<view class="nas-home-top-right"><image src="/static/tv-static/tv-title.svg" mode=""></image></view>
					</view>
				</view>

				<view class="tv-right-top">
					<view class="tv-right-img"><image src="/static/tv-static/tv-logo1.svg" mode=""></image></view>
					<view class="tv-right-img-text">一叶扁舟</view>
				</view>
			</view>

			<view class="nas-home-top" v-if="title">
				<view class="nas-bar-item" @click="goBack"><image src="/static/nas-static/nas_back_s.svg" mode=""></image></view>
				<view class="nas-bar-item">{{ title }}</view>
				<view class="nas-bar-item"></view>
			</view>

			<!-- <view class="nas-home-top" v-if="showBottomMore">
				<view class="nas-bar-item" @click="allCancel">取消</view>
				<view class="nas-bar-item">已选中{{ selectAmount }}个文件</view>
				<view class="nas-bar-item" @click="allSelect">全选</view>
			</view> -->

			<!-- 搜索栏 -->
			<!-- <view class="nas-search" @click="goSearch">
				<image class="nas-search-left" src="/static/nas-static/nas-search.svg" mode=""></image>
				搜索网盘文件
			</view> -->
			<!-- 排序 -->
			<!-- <view class="nas-sort">
				<view class="nas-sort-left" @click="openSort">
					<image v-if="sortType === 1" class="nas-sort-left1" src="/static/nas-static/nas-sort-down.svg" mode=""></image>
					<image v-if="sortType === 2" class="nas-sort-left1" src="/static/nas-static/nas-up.svg" mode=""></image>
					<view>{{ sortType === 1 ? '上传时间' : '文件名称' }}</view>
					<image class="nas-sort-left2" src="/static/nas-static/nas-down.svg" mode=""></image>
				</view>
				<view class="nas-sort-right" @click="changMoudle">
					<image v-if="showMoudle" class="nas-sort-left2" src="/static/nas-static/nas-list.svg" mode=""></image>
					<image v-if="!showMoudle" class="nas-sort-left2" src="/static/nas-static/nas-suoluetu.svg" mode=""></image>
					<view>{{ showMoudle ? '列表模式' : '缩略图模式' }}</view>
				</view>
			</view> -->

			<!-- tv切换 -->
			<view class="tv-tab-all">
				<view class="tv-tab">
					<!-- <u-subsection
						:list="list"
						:animation="false"
						:current="current"
						@change="selectTab"
						active-color="#fff"
						inactive-color="#fff"
						bg-color="#1F1425"
						button-color="#3069DC"
						font-size="42"
						bold
					></u-subsection> -->
					<view class="tv-tab-item" :class="{ active: current === index }" @click="selectTab(index)" v-for="(item, index) in list" :key="index">{{ item.name }}</view>
				</view>
				<view class="tv-tab-qiehuan" @click="changMoudle">
					<image v-if="showMoudle" class="nas-sort-left2" src="/static/nas-static/nas-list.svg" mode=""></image>
					<image v-if="!showMoudle" class="nas-sort-left2" src="/static/nas-static/nas-suoluetu.svg" mode=""></image>
					<view class="tv-tab-qiehuan-text">{{ showMoudle ? '列表模式' : '缩略图模式' }}</view>
				</view>
				<!-- 	<view class="tv-tab-qiehuan" @click="changMoudle">
					<image v-if="showMoudle" class="nas-sort-left2" src="/static/nas-static/nas-list.svg" mode=""></image>
					<image v-if="!showMoudle" class="nas-sort-left2" src="/static/nas-static/nas-suoluetu.svg" mode=""></image>
					<view class="tv-tab-qiehuan-text">{{ showMoudle ? '列表模式' : '缩略图模式' }}</view>
				</view> -->
				<view style="width:365rpx;margin-left: 20rpx; display: flex;align-items: center;">
					<nas-select
						:list="columns"
						:clearable="false"
						:showItemNum="5"
						:listShow="false"
						:isCanInput="false"
						:style_Container="listBoxStyle"
						:placeholder="'placeholder'"
						:initValue="hasSelect"
						:selectHideType="'independent'"
						@change="change"
					></nas-select>
				</view>
			</view>

			<!-- 列表内容 -->
			<scroll-view
				show-scrollbar="true"
				class="nas-body"
				v-if="showMoudle"
				scroll-y="true"
				:refresher-enabled="isOpenRefresh"
				:refresher-triggered="triggered"
				refresher-background="white"
				@refresherpulling="onPulling"
				@refresherrefresh="onRefresh"
				@refresherrestore="onRestore"
				@scrolltolower="scrolltolower"
			>
				<view class="tv-body">
					<view class="nas-body-item" v-for="(item, index) in fileList" :key="index" @click="goIntoFile(item)">
						<view class="nas-body-image">
							<image :src="getFileType(item.filename)" mode="" v-if="item.type !== 'DIR'"></image>
							<image src="/static/nas-static/nas-list-file.svg" mode="" v-if="item.type === 'DIR'"></image>
						</view>
						<view class="nas-body-left-right">
							<view>{{ item.filename }}</view>
							<view>{{ happenTimeFun(item.mtime) }} {{ dealSize(item.size) }}</view>
						</view>
						<!-- <view class="nas-body-right-circle" @click.stop="hasSelectFile(item)">
						<image v-if="!item.select" src="/static/nas-static/nas-radio-none.svg" mode=""></image>
						<image v-if="item.select" src="/static/nas-static/nas-radio-yes.svg" mode=""></image>
					</view> -->
					</view>
				</view>
			</scroll-view>

			<!-- 缩略图内容 -->
			<scroll-view
				show-scrollbar="true"
				scroll-y="true"
				class="nas-body-sl"
				v-if="!showMoudle"
				:refresher-enabled="isOpenRefresh"
				:refresher-triggered="triggered"
				refresher-background="white"
				@refresherpulling="onPulling"
				@refresherrefresh="onRefresh"
				@refresherrestore="onRestore"
				@scrolltolower="scrolltolower"
			>
				<view class="nas-body-sl1">
					<view class="nas-body-item-sl" v-for="(item, index) in fileList" :key="index" @click="goIntoFile(item)">
						<view class="nas-body-in-sl">
							<image class="nas-dir" :src="getFileType(item.filename)" mode="" v-if="item.type !== 'DIR'"></image>
							<image class="nas-dir" src="/static/nas-static/nas-list-file.svg" mode="" v-if="item.type === 'DIR'"></image>
						</view>
						<view class="nas-body-sl-bottom">
							<view class="nas-body-sl-left">{{ item.filename }}</view>
							<view class="nas-body-sl-left">{{ happenTimeFun(item.mtime) }}</view>
							<!-- <view class="nas-body-right-circle" @click.stop="hasSelectFile(item)">
								<image v-if="!item.select" src="/static/nas-static/nas-radio-none.svg" mode=""></image>
								<image v-if="item.select" src="/static/nas-static/nas-radio-yes.svg" mode=""></image>
							</view> -->
						</view>
					</view>
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i></i>
				</view>
			</scroll-view>

			<!-- 添加按钮 -->
			<!-- <view class="nas-add"><image @click="openUpLoad" src="/static/nas-static/nas-add.svg" mode=""></image></view> -->
			<!-- 上传选择页面 -->
			<NasUploadFile v-if="showUpLoad" @create="create" @saveFile="saveFile" @close="close" @toSelectFile="toSelectFile"></NasUploadFile>
			<!-- 排序底部上拉层 -->
			<u-popup v-model="showSort" bgColor="#fff" mode="bottom" style="z-index: 999;">
				<view class="nas-popup-bottom-item" :class="{ active: sortType === 1 }" @click="changeSort(1)">
					<image v-if="sortType === 1" src="/static/nas-static/nas-daoxu2.svg" mode=""></image>
					<image v-if="sortType === 2" src="/static/nas-static/nas-daoxu1.svg" mode=""></image>
					<view>按上传时间倒序</view>
				</view>
				<view class="nas-popup-bottom-item" :class="{ active: sortType === 2 }" @click="changeSort(2)">
					<image v-if="sortType === 1" src="/static/nas-static/nas-zx1.svg" mode=""></image>
					<image v-if="sortType === 2" src="/static/nas-static/nas-zx2.svg" mode=""></image>
					<view>按文件名称正序</view>
				</view>
			</u-popup>
			<!-- 更多底部上拉层 -->
			<u-popup v-model="showOther" bgColor="#fff" mode="bottom">
				<view class="nas-popup-bottom-item" @click="goMore('重命名')" v-if="canRename">
					<image src="/static/nas-static/nas-rename.svg" mode=""></image>
					<view>重命名</view>
				</view>
				<view class="nas-popup-bottom-item" @click="goMore('家庭圈')">
					<image src="/static/nas-static/nas-jiating.svg" mode=""></image>
					<view>分享到家庭圈</view>
				</view>
				<view class="nas-popup-bottom-item" @click="goMore('云空间')">
					<image src="/static/nas-static/nas-geren.svg" mode=""></image>
					<view>分享到云空间</view>
				</view>
			</u-popup>

			<!-- 更多操作 -->
			<view class="nas-more-bottom" v-if="showBottomMore">
				<view class="nas-more-bottom-item" @click="dealBottom('download')">
					<image class="nas-more-bottom-img" src="/static/nas-static/nas-download.svg"></image>
					<view>下载</view>
				</view>
				<view class="nas-more-bottom-item" @click="dealBottom('move')">
					<image class="nas-more-bottom-img" src="/static/nas-static/nas-yidong.svg"></image>
					<view>移动</view>
				</view>
				<view class="nas-more-bottom-item" @click="dealBottom('delete')">
					<image class="nas-more-bottom-img" src="/static/nas-static/nas-delete.svg"></image>
					<view>删除</view>
				</view>
				<view class="nas-more-bottom-item" @click="dealBottom('copy')">
					<image class="nas-more-bottom-img" src="/static/nas-static/nas-copy.svg"></image>
					<view>复制</view>
				</view>
				<view class="nas-more-bottom-item" @click="openMore">
					<image class="nas-more-bottom-img" src="/static/nas-static/nas-showmore.svg"></image>
					<view>更多</view>
				</view>
			</view>

			<!-- 重命名弹窗 -->
			<u-modal v-model="showRename" title="重命名" :showCancelButton="true" @confirm="goRename">
				<view class="nas-content"><uni-easyinput v-model="newName" :clearable="true"></uni-easyinput></view>
			</u-modal>

			<!-- 新建文件夹弹窗 -->
			<u-modal v-model="showCreateFile" title="新建文件夹" :showCancelButton="true" @confirm="createFile">
				<view class="nas-content"><uni-easyinput v-model="createFileName" :clearable="true"></uni-easyinput></view>
			</u-modal>

			<!-- 删除弹窗 -->
			<u-modal v-model="showDelete" title="删除文件" :showCancelButton="true" @confirm="deleteFiles"><view class="nas-content">确认删除么？</view></u-modal>
		</view>
		<view class="nas-unregistered" v-if="accountStatus == 0">
			<view class="nas-unregistered-img"><image src="/static/nas-static/nas-unregistered.svg" mode=""></image></view>
			<view class="nas-unregistered-title">未开通家庭NAS业务，开通咨询</view>
			<view class="nas-unregistered-tip">naser_sh@chinaunicom.cn</view>
		</view>
		<view v-if="accountStatus == 1" class="nas-login">
			<view class="nas-login-img"><image src="/static/nas-static/nas-login-icon.svg" mode=""></image></view>
			<view class="nas-login-title"><image src="/static/nas-static/nas-title.svg" mode=""></image></view>
			<view class="nas-login-password">
				<nas-input ref="input1" type="password" :verification="['isNull']" :verificationTip="['密码不能为空']" placeholder="请输入密码" maBtm="10"></nas-input>
			</view>
			<view class="nas-login-password">
				<nas-input ref="input2" type="password" :verification="['isNull']" :verificationTip="['密码不能为空']" placeholder="请确认密码" maBtm="10"></nas-input>
			</view>
			<view class="nas-login-rule">密码至少8个字符，需包含数字、字母和特殊字符三种字符且不能包含3个及以上键盘连续字符</view>
			<button class="nas-login-button" @click="onerification">进入云NAS</button>
		</view>
	</view>
</template>

<script>
import NasDownload from '../utils/download.js';
import NasUploadFile from '../components/nas-uploadFile/nas-uploadFile.vue';
import request from '../utils/request.js';
import { mapMutations } from 'vuex';
import nasAes from '../utils/nasAes.js';
import nasInput from '../components/nas-input/nas-input';
import sortFileName from '../utils/sortFileName.js';
import nasSelect from '../components/nas-select/nas-select.vue';
export default {
	name: 'nasHome',
	components: {
		NasUploadFile,
		nasInput,
		nasSelect
	},
	data() {
		return {
			list: [
				{
					name: '全部'
				},
				{
					name: '图片'
				},
				{
					name: '视频'
				},
				{
					name: '音频'
				},
				{
					name: '文档'
				}
			],
			current: 0, // 当前的tab
			showUpLoad: false, // 上传页面显示和隐藏
			showSort: false, // 排序弹窗
			fileList: [], // 文件列表
			originFileList: [], // 原始列表数据
			sortType: 1, // 排序方式
			sortName: '上传时间', // 默认排序名
			showMoudle: true, // 展示的样式类型
			showBottomMore: false, // 底部操作栏
			showRename: false, // 重命名弹窗
			newName: '', // 新的命名
			canRename: false, // 是否可以重命名
			showCreateFile: false, // 新建文件夹弹窗
			createFileName: '', // 新建的文件夹名称
			triggered: false, // 出发下拉刷新
			isOpenRefresh: true, // 是否开启下拉
			showDelete: false, // 删除确认框
			newDirectory: '', // 当前的文件夹
			title: '', // 当前的标题
			selectAmount: 0, // 已选择的文件的数量
			accountStatus: 3,
			mobile: '',
			offset: 0,
			showOther: false,
			searchType: '', //分类
			pageNum: 1,
			listBoxStyle: `padding-left: 20rpx; height: 73rpx; font-size: 42rpx; border-radius: 42rpx; bacground:#5C656E; color: #F1F1F1`,
			hasSelect: '按上传时间'
		};
	},
	computed: {
		columns() {
			let list = [];
			if (this.searchType) {
				list = ['按上传时间', '按文件名称'];
			} else {
				list = ['按上传时间', '按文件名称', '按文件类型'];
			}
			return list;
		}
	},
	onLoad() {
		// 隐藏底部的tabBar
		uni.hideTabBar(),
			// 初始化数据，获取全部文件，鉴权判断
			this.authentication();
		// 通知刷新数据
		uni.$on('refreshData', () => {
			this.title = '';
			this.newDirectory = '';
			this.offset = 0;
			this.originFileList = [];
			this.initInfos();
		});
	},
	methods: {
		...mapMutations(['nasDownloadListAdd']),
		async authentication() {
			// 1、用户状态是未开通未注册，则跳转到没有资格提示页面
			// 2、用户状态是已开通未注册，则跳转到首次登录设置密码页面，设置完密码之后，获取token然后跳转到云NAS首页
			// 3、用户状态是已开通已注册，则先获取token，然后跳转到云NAS首页

			// 第一步、获取该手机号用户的当前状态：0:未开通未注册 1:已开通未注册 2:未开通已注册 3:已开通已注册 4:冻结状态
			const loginToken =
				uni.getStorageSync('Token') ||
				'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJwaG9uZU51bWJlciI6IjEzMjYyNzQwNjk0IiwidXNlcklkIjo1ODgyNCwiaWF0IjoxNjU3NTI5ODAzOTgxLCJsb2dpblNvdXJjZSI6Il9hcHBfbG9naW5fc291cmNlXyJ9.qNOHO8zQlekndnyXujVQr3dL99Smmdf4uWEZeSfOmLY';
			this.mobile = '';
			const paramsPhone = {
				method: 'POST',
				url: '/naslocal/sdk/mobileinfo',
				data: {
					loginToken: loginToken
				}
			};
			const resPhone = await request(paramsPhone);
			console.log(resPhone, 'resPhone');
			this.mobile = resPhone.data.phoneNumber;
			// this.mobile = '13033063307';
			const statusParams = {
				method: 'POST',
				url: '/nas/user/status',
				data: {
					mobile: this.mobile
				}
			};
			const resStatus = await request(statusParams);
			const status = resStatus.data;
			// 已开通已注册状态
			if (status == 3) {
				// 获取加密需要的key
				const keyParams = {
					method: 'POST',
					url: '/nas/session/key',
					data: {
						mobile: this.mobile
					}
				};
				const keyRes = await request(keyParams);
				const key = keyRes.data;
				// 获取智家云盘的token，对智家云盘的token进行加密
				const tokenParams = {
					method: 'POST',
					url: '/naslocal/sdk/apptoken',
					data: {
						mobile: this.mobile,
						loginToken: nasAes.setAES(loginToken, key)
					}
				};
				console.log(tokenParams, 'tokenParams');
				const resToken = await request(tokenParams);
				if (resToken.data.access_token) {
					uni.setStorageSync('nasToken', resToken.data.access_token);
					this.accountStatus = 3;
					this.initInfos();
				} else {
					uni.showToast({
						icon: 'error',
						title: '获取token失败'
					});
				}
			} else if (status == 0) {
				// uni.navigateTo({
				// 	url: '/pages/nas/nas-unregistered/nas-unregistered'
				// 	// url: '/pages/nas/nas-login/nas-login'
				// });
				this.accountStatus = 0;
			} else if (status == 1) {
				this.accountStatus = 1;
			}
			// uni.showToast({
			// 	icon: 'none',
			// 	title: '校验通过',
			// 	// #ifdef MP-WEIXIN
			// 	duration: 2000
			// 	// #endif
			// 	// mask: true
			// });
		},
		change(e) {
			// console.log(e, 'eeeee');
			this.hasSelect = e.newVal;
			this.changeSort(e.index);
		},
		async onerification() {
			if (this.$refs.input1.getValue()) {
				if (this.$refs.input2.getValue()) {
					if (this.$refs.input1.getValue() !== this.$refs.input2.getValue()) {
						uni.showToast({
							icon: 'none',
							title: '两次密码不一致'
						});
					} else {
						// 获取加密需要的key
						const keyParams = {
							method: 'POST',
							url: '/nas/session/key',
							data: {
								mobile: this.mobile
							}
						};
						const keyRes = await request(keyParams);
						const key = keyRes.data;
						// 注册
						const loginToken =
							uni.getStorageSync('Token') ||
							'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJwaG9uZU51bWJlciI6IjEzMjYyNzQwNjk0IiwidXNlcklkIjo1ODgyNCwiaWF0IjoxNjU3NTI5ODAzOTgxLCJsb2dpblNvdXJjZSI6Il9hcHBfbG9naW5fc291cmNlXyJ9.qNOHO8zQlekndnyXujVQr3dL99Smmdf4uWEZeSfOmLY';
						const registerParams = {
							method: 'POST',
							url: '/naslocal/user/appregister',
							data: {
								mobile: this.mobile,
								password: nasAes.setAES(this.$refs.input1.getValue(), key),
								loginToken: nasAes.setAES(loginToken, key)
							}
						};
						console.log(registerParams, 'registerParams');
						uni.showLoading({
							title: '正在注册...'
						});
						const resRegister = await request(registerParams);
						uni.hideLoading();
						console.log(resRegister, 'resRegister');
						if (!resRegister) return;
						// 获取token进行跳转
						const tokenParams = {
							method: 'POST',
							url: '/naslocal/sdk/apptoken',
							data: {
								mobile: this.mobile,
								loginToken: nasAes.setAES(loginToken, key)
							}
						};
						console.log(tokenParams, 'tokenParams');
						const resToken = await request(tokenParams);
						if (resToken.data.access_token) {
							uni.setStorageSync('nasToken', resToken.data.access_token);
							this.accountStatus = 3;
							// uni.navigateTo({
							// 	url: '/pages/nas/nas-home/nas-home'
							// });
						} else {
							uni.showToast({
								icon: 'error',
								title: '获取token失败'
							});
						}
						// uni.navigateTo({
						// 	url: `/pages/nas/nas-home/nas-home`
						// });
					}
				}
			}
		},
		async initInfos() {
			this.showOther = false;
			if (this.offset == -1) return;
			let params = {};
			if (!this.searchType) {
				params = {
					method: 'POST',
					url: '/nas/rd_center/data/get',
					data: {
						method: 'capacity.nas.cloud.file.list',
						type: 1,
						data: {
							directory: this.newDirectory === '' ? '/' : this.newDirectory,
							limit: 500,
							offset: +this.offset
						}
					}
				};
			} else {
				params = {
					method: 'POST',
					url: '/nas/rd_center/data/get',
					data: {
						method: 'capacity.nas.cloud_account_findtype',
						type: 1,
						data: {
							filetype: this.searchType,
							orderby: 'filename',
							sort: 'desc',
							pagesize: '500',
							pagenum: this.pageNum + ''
						}
					}
				};
			}
			console.log(params, '列表的params');
			const res = await request(params);
			console.log(res, '列表的res');
			if (res.data.data.length > 0) {
				this.showBottomMore = false;
				if (this.searchType) {
					// 处理非全部分类的情况
					this.pageNum = this.pageNum + 1;
					// 处理非全部分类的情况
					res.data.data.forEach(ped => {
						if (ped.filepath === '/') {
							ped.path = '/';
						} else {
							let needPath = ped.filepath.split('/');
							needPath.pop();
							ped.path = needPath.join('/');
						}
						ped.mtime = ped.filetime;
						ped.size = ped.filesize;
					});
					console.log(res.data.data, 'res.data.data');
				} else {
					this.offset = res.data.data.length > 499 ? res.data.data[res.data.data.length - 1].offset : -1;
				}
			}
			// 默认都未选中
			res.data.data.forEach(val => (val.select = false));
			// 原始数据
			this.originFileList = this.originFileList.concat(res.data.data);
			// console.log(this.originFileList);
			this.fileList = JSON.parse(JSON.stringify(this.originFileList));
			// 进行排序
			if (this.sortType == 1) {
				this.fileList.sort(function(a, b) {
					return a.mtime - b.mtime;
				});
			} else {
				sortFileName(this.fileList);
			}
			// console.log(this.fileList, 'this.fileList');
		},
		// 打开上传选择页面
		openUpLoad() {
			this.showUpLoad = true;
		},
		// 关闭上传选择页面
		close() {
			this.showUpLoad = false;
		},
		// 选择完上传文件后跳转到文件夹选择页面
		toSelectFile() {
			this.close();
			// 跳转到下载列表
			uni.navigateTo({
				url: '/pages/nas/nas-transferList/nas-transferList'
			});
		},
		// 打开传输列表
		goTransferList() {
			uni.navigateTo({
				url: '/pages/nas/nas-transferList/nas-transferList'
			});
		},
		// 打开排序弹窗
		openSort() {
			this.showSort = true;
		},
		// 底部操作
		dealBottom(type) {
			switch (type) {
				case 'delete':
					this.showDelete = true;
					break;
				case 'move':
					// 获取文件当前的文件路径
					let moveList = [];
					this.fileList.forEach(pre => {
						if (pre.select) {
							const pathName = pre.path === '/' ? `${pre.path}${pre.filename}` : `${pre.path}/${pre.filename}`;
							moveList.push(pathName);
						}
					});
					const directorys = JSON.stringify(moveList);
					uni.navigateTo({
						url: `/pages/nas/nas-saveUploadFile/nas-saveUploadFile?type=1&directorys=${directorys}`
					});
					break;
				case 'copy':
					// 获取文件当前的文件路径
					let copyList = [];
					this.fileList.forEach(pre => {
						if (pre.select) {
							const pathName = pre.path === '/' ? `${pre.path}${pre.filename}` : `${pre.path}/${pre.filename}`;
							copyList.push(pathName);
						}
					});
					const directorysCopy = JSON.stringify(copyList);
					uni.navigateTo({
						url: `/pages/nas/nas-saveUploadFile/nas-saveUploadFile?type=3&directorys=${directorysCopy}`
					});
					break;
				case 'download':
					// 文件夹不支持下载
					const hasDir = this.fileList.some(ped => ped.select && ped.type === 'DIR');
					if (hasDir) {
						uni.showToast({
							title: '文件夹暂不支持下载',
							icon: 'none',
							duration: 2000
						});
					} else {
						const downloadList = this.fileList.forEach(val => {
							if (val.select) {
								// 处理参数
								const item = {
									filenamepath: val.path === '/' ? val.path + val.filename : val.path + '/' + val.filename, //上传到的目标文件夹目录
									name: val.filename, //上传文件的本地地址
									size: val.size, //文件的总大小
									uid: 'nas_' + this.uuid() //唯一的标识
								};
								let nasDownload = new NasDownload.nasDownloadClass({
									...item
								});
								// console.log(nasDownload, 'nasDownload');
								this.nasDownloadListAdd(nasDownload);
							}
						});
						this.fileList.forEach(pre => (pre.select = false));
						this.showBottomMore = false;
						uni.showToast({
							title: '已加入下载列表',
							icon: 'none',
							duration: 2000
						});
					}

					break;
				default:
					break;
			}
		},
		// 上拉加载更多
		scrolltolower() {
			console.log('上拉加载更多');
			this.initInfos();
		},
		// 打开更多窗口
		openMore() {
			this.showOther = true;
		},
		// 选择排序
		changeSort(type) {
			this.sortType = type;
			if (this.sortType == 0) {
				this.fileList.sort(function(a, b) {
					return a.mtime - b.mtime;
				});
			} else if (this.sortType == 1) {
				sortFileName(this.fileList);
			} else {
				this.sortByType(this.fileList);
			}
			this.showSort = false;
		},
		// 列表和缩略图切换
		changMoudle() {
			this.showMoudle = !this.showMoudle;
		},
		// 按照类型进行分类
		sortByType(item) {
			const list = [];
			const list0 = item.filter(val => {
				const type = val.type;
				if (type === 'DIR') {
					return true;
				}
			});
			const list1 = item.filter(val => {
				const type = this.getFileTypeByView(val.filename);
				if (type === 'txt' || type === 'excel' || type === 'word' || type === 'pdf' || type === 'ppt') {
					return true;
				}
			});
			const list2 = item.filter(val => {
				const type = this.getFileTypeByView(val.filename);
				if (type === 'image') {
					return true;
				}
			});
			const list3 = item.filter(val => {
				const type = this.getFileTypeByView(val.filename);
				if (type === 'video' || type === 'radio') {
					return true;
				}
			});
			this.fileList = [...list0, ...list1, ...list2, ...list3];
		},
		// 更多操作方法
		goMore(type) {
			switch (type) {
				case '重命名':
					this.showOther = false;
					this.newName = this.fileList.find(val => val.select).filename;
					this.showRename = true;
					break;
				case '家庭圈':
					// 处理分享到家庭圈
					const familyFileInfos = {
						fileList: [],
						dirList: []
					};
					this.fileList.forEach(pre => {
						if (pre.select) {
							// 保存文件夹
							if (pre.type === 'DIR') {
								familyFileInfos.dirList.push({
									dirId: pre.path + pre.filename + '/',
									dirName: pre.filename
								});
							} else {
								// 保存文件
								const jtPath = pre.path === '/' ? `${pre.path}${pre.filename}` : `${pre.path}/${pre.filename}`;
								familyFileInfos.fileList.push(jtPath);
							}
						}
					});
					// console.log(familyFileInfos, 'familyFileInfos')
					const familyInfos = JSON.stringify(familyFileInfos);
					uni.navigateTo({
						url: `/pages/nas/nas-family/nas-family?infos=${familyInfos}`
					});
					break;
				case '云空间':
					// 处理分享到云空间
					const yunFileInfos = {
						fileList: [],
						dirList: []
					};
					this.fileList.forEach(pre => {
						if (pre.select) {
							// 保存文件夹
							if (pre.type === 'DIR') {
								yunFileInfos.dirList.push({
									dirId: pre.path === '/' ? pre.path + pre.filename + '/' : pre.path + '/' + pre.filename + '/',
									dirName: pre.filename
								});
							} else {
								// 保存文件
								const yunPath = pre.path === '/' ? `${pre.path}${pre.filename}` : `${pre.path}/${pre.filename}`;
								yunFileInfos.fileList.push(yunPath);
							}
						}
					});
					const yunInfos = JSON.stringify(yunFileInfos);
					console.log(yunFileInfos, 'yunFileInfos');
					uni.navigateTo({
						url: `/pages/nas/nas-saveUploadFile/nas-saveUploadFile?type=5&familyInfos=${yunInfos}`
					});
					break;
				default:
					break;
			}
		},
		// 确认删除
		async deleteFiles() {
			const selectList = this.fileList.filter(val => val.select);
			for (let i = 0; i < selectList.length; i++) {
				let directory = '';
				if (this.searchType) {
					directory = selectList[i].path === '/' ? '/' + selectList[i].filename : selectList[i].path + '/' + selectList[i].filename;
				} else {
					directory = this.newDirectory === '' ? `/${selectList[i].filename}` : `${this.newDirectory}/${selectList[i].filename}`;
				}
				const params = {
					method: 'POST',
					url: '/nas/rd_center/data/get',
					data: {
						method: 'capacity.nas.cloud.file.dir.delete',
						type: 1,
						data: {
							directory: directory
						}
					}
				};
				console.log('删除的请求', params);
				const res = await request(params);
			}
			// 重新获取列表数据
			this.offset = 0;
			this.pageNum = 1;
			this.originFileList = [];
			this.initInfos();
		},
		// 确认创建文件夹
		async createFile() {
			if (!this.createFileName) return;
			const params = {
				method: 'POST',
				url: '/nas/rd_center/data/get',
				data: {
					method: 'capacity.nas.cloud.file.dir.create',
					type: 1,
					data: {
						directory: this.newDirectory === '' ? `/${this.createFileName}` : `${this.newDirectory}/${this.createFileName}`
					}
				}
			};
			const res = await request(params);
			this.createFileName = '';
			// 重新获取列表数据
			this.offset = 0;
			this.originFileList = [];
			this.initInfos();
		},
		// 新建文件夹
		create() {
			this.close();
			this.showCreateFile = true;
		},
		// tab切换
		selectTab(e) {
			this.current = e;
			this.showOther = false;
			this.showBottomMore = false;
			this.fileList = [];
			this.originFileList = [];
			this.pageNum = 1;
			this.offset = 0;
			switch (e) {
				case 0:
					this.searchType = '';
					break;
				case 1:
					this.searchType = 'image';
					break;
				case 2:
					this.searchType = 'video';
					break;
				case 3:
					this.searchType = 'audio';
					break;
				case 4:
					this.searchType = 'doc';
					break;
				default:
					break;
			}
			// console.log(this.searchType, 'this.searchType');
			this.initInfos();
		},
		// 前往搜索页面
		goSearch() {
			uni.navigateTo({
				url: '/pages/nas/nas-search/nas-search'
			});
		},
		// 判断是否存在选中的文件
		hasSelectFile(item) {
			item.select = !item.select;
			const hasSelectFileList = this.fileList.filter(val => val.select);
			this.selectAmount = hasSelectFileList.length;
			// 多选文件不可以重命名
			if (hasSelectFileList.length > 1) {
				this.showBottomMore = true;
				this.canRename = false;
			} else if (hasSelectFileList.length === 1) {
				// 单选文件可以重命名
				this.showBottomMore = true;
				this.canRename = true;
			} else {
				this.showBottomMore = false;
				this.canRename = false;
			}
		},
		// 重命名
		async goRename() {
			if (!this.newName) return;
			const file = this.fileList.find(val => val.select);
			const params = {
				method: 'POST',
				url: '/nas/rd_center/data/get',
				data: {
					method: 'capacity.nas.cloud.file.rename',
					type: 1,
					data: {
						directory: file.path,
						filename: file.filename,
						newFilename: this.newName
					}
				}
			};
			const res = await request(params);
			// 重新获取列表数据
			this.offset = 0;
			this.originFileList = [];
			this.initInfos();
			console.log(res, '重命名结果');
		},
		// 自定义下拉刷新控件被下拉
		onPulling(e) {
			console.log('onpulling', e);
			if (e.detail.deltaY < 0) return; // 防止上滑页面也触发下拉
			this.triggered = true;
		},
		// 自定义下拉刷新被触发
		onRefresh() {
			if (this._freshing) return;
			this._freshing = true;
			setTimeout(() => {
				this.triggered = false;
				this._freshing = false;
				this.offset = 0;
				this.pageNum = 1;
				this.originFileList = [];
				this.initInfos();
			}, 500);
		},
		// 自定义下拉刷新被复位
		onRestore() {
			this.triggered = 'restore'; // 需要重置
			console.error('onRestore');
		},
		// 打开文件夹
		async goIntoFile(item) {
			console.log(item, 'item');
			if (item.type !== 'DIR' && !this.showBottomMore) {
				// 打开文件
				const filename = item.filename;
				const filepath = item.filepath;
				const filenamepath = item.path === '/' ? item.path + item.filename : item.path + '/' + item.filename; //上传到的目标文件夹目录
				// console.log(filenamepath ,'filenamepath')
				// 判断打开的文件类型，图片需要特殊处理
				const type = this.getFileTypeByView(item.filename);
				if (type === 'image') {
					const params = {
						method: 'POST',
						url: '/nas/user/upload/userInfo',
						contentType: 'application/x-www-form-urlencoded',
						data: {
							pathFileName: filenamepath,
							uploadType: 1
						}
					};
					const res = await request(params);
					const token = res.data;
					const list = this.fileList.filter(val => this.getFileTypeByView(val.filename) === 'image');
					// 确定当前的展示图片的下标
					let tabIndex = 0;
					let showList = [];
					list.forEach(val => {
						if (this.searchType) {
							if (val.filepath === filepath && val.filename === filename) {
								tabIndex = showList.length;
							}
						} else {
							if (val.filename === filename) {
								tabIndex = showList.length;
							}
						}
						const filenamepaths = val.path === '/' ? val.path + val.filename : val.path + '/' + val.filename;
						const imgUrl =
							'http://58.34.36.138:18480/nasforward/file/piece/download?filenamepath=' +
							filenamepaths +
							'&offset=0&bufsize=&fileName=' +
							val.filename +
							'&uploadToken=' +
							token +
							'&clientType=2';
						showList.push(imgUrl);
					});
					console.log(showList, 'showList');
					// 预览图片
					uni.previewImage({
						current: tabIndex,
						urls: showList, //图片路径是个数组，数组里面放图片的全路径
						longPressActions: {
							//长按保存图片到相册
							itemList: ['保存图片'],
							success: data => {
								console.log(data, 'data');
								// uni.saveImageToPhotosAlbum({
								// 	//保存图片到相册
								// 	filePath: '',
								// 	success: function() {
								// 		uni.showToast({ icon: 'success', title: '保存成功' });
								// 	},
								// 	fail: err => {
								// 		uni.showToast({ icon: 'none', title: '保存失败，请重新尝试' });
								// 	}
								// });
								uni.downloadFile({
									url: showList[data.index],
									success: res => {
										if (res.statusCode === 200) {
											uni.saveImageToPhotosAlbum({
												filePath: res.tempFilePath,
												success: function() {
													uni.showToast({
														title: '保存成功',
														icon: 'none'
													});
												},
												fail: function() {
													uni.showToast({
														title: '保存失败，请稍后重试',
														icon: 'none'
													});
												}
											});
										}
									}
								});
							},
							fail: err => {
								console.log(err.errMsg);
							}
						}
					});
					// uni.navigateTo({
					// 	url: `/pages/nas/nas-video/nas-video?filename=${filename}&imgList=${imgList}&filenamepath=${filenamepath}`
					// });
				} else if (type === 'video1' || type === 'radio1') {
					const params = {
						method: 'POST',
						url: '/nas/user/upload/userInfo',
						contentType: 'application/x-www-form-urlencoded',
						data: {
							pathFileName: filenamepath,
							uploadType: 1
						}
					};
					const res = await request(params);
					const token = res.data;
					let src =
						'http://58.34.36.138:18480/nasforward/file/piece/download?filenamepath=' +
						filenamepath +
						'&offset=0&bufsize=&fileName=' +
						filename +
						'&uploadToken=' +
						token +
						'&clientType=2';
					const urlSrc = encodeURI(src);
					// const testModule = uni.requireNativePlugin('Seal-OfficeOnline');
					// const testModule = uni.requireNativePlugin('Seal-ImageVideo');
					// 视频播放，支持市面上几乎所有的视频格式，包括mp4, flv, avi, 3gp, webm, ts, ogv, m3u8, asf, wmv, rm, rmvb, mov, mkv等18种视频格式
					// 功能包括：全屏播放、锁屏、分享、画面比例调节、左边上下滑动调节亮度，右边上下滑动调节音量等
					// 支持Android和IOS
					// testModule.openFile({
					// 	videoUrl: urlSrc // 视频在线url，此参数优先于图片预览和文档预览
					// });
					// uni.navigateTo({
					// 	url: `/pages/nas/nas-video/nas-video?filename=${filename}&filenamepath=${filenamepath}`
					// });
				} else {
					uni.navigateTo({
						url: `/pages/nas/nas-video/nas-video?filename=${filename}&filenamepath=${filenamepath}`
					});
				}
			} else if (item.type === 'DIR' && !this.showBottomMore) {
				this.offset = 0;
				this.originFileList = [];
				this.title = item.filename;
				this.newDirectory = this.newDirectory == '/' ? `${this.newDirectory}${item.filename}` : `${this.newDirectory}/${item.filename}`;
				// 获取当前文件下的文件夹
				this.initInfos();
			}
		},

		// 进入文件夹返回
		goBack() {
			this.offset = 0;
			this.originFileList = [];
			// 返回到上一级的目录
			const newList = this.newDirectory.split('/');
			newList.pop();
			this.title = newList[newList.length - 1];
			if (newList.length === 1) {
				this.newDirectory = '/';
				this.title = '';
			} else {
				this.newDirectory = newList.join('/');
			}
			// 获取当前文件下的文件夹
			this.initInfos();
		},
		// 选择完文件后，跳转保存到文件夹的页面
		saveFile() {
			this.showUpLoad = false;
			uni.navigateTo({
				url: '/pages/nas/nas-saveUploadFile/nas-saveUploadFile?type=2'
			});
		},
		// 取消选择
		allCancel() {
			this.fileList.forEach(val => (val.select = false));
			this.showBottomMore = false;
		},
		// 全选
		allSelect() {
			this.fileList.forEach(val => (val.select = true));
		},
		//计算文件的大小
		dealSize: num => {
			if (!num) return '0B';
			let k = 1024; //设定基础容量大小
			let sizeStr = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; //容量单位
			let i = 0; //单位下标和次幂
			for (let l = 0; l < 8; l++) {
				//因为只有8个单位所以循环八次
				if (num / Math.pow(k, l) < 1) {
					//判断传入数值 除以 基础大小的次幂 是否小于1，这里小于1 就代表已经当前下标的单位已经不合适了所以跳出循环
					break; //小于1跳出循环
				}
				i = l; //不小于1的话这个单位就合适或者还要大于这个单位 接着循环
			}
			//例： 900 / Math.pow(1024, 0)  1024的0 次幂 是1 所以只要输入的不小于1 这个最小单位就成立了；
			//   900 / Math.pow(1024, 1)  1024的1次幂 是1024  900/1024 < 1 所以跳出循环 下边的 i = l；就不会执行  所以 i = 0； sizeStr[0] = 'B';
			//   以此类推 直到循环结束 或 条件成立
			return (num / Math.pow(k, i)).toFixed(2) + sizeStr[i]; //循环结束 或 条件成立 返回字符
		},
		//时间戳数据处理
		happenTimeFun(num) {
			let date = new Date(num * 1000);
			//时间戳为10位需*1000，时间戳为13位的话不需乘1000
			let y = date.getFullYear();
			let MM = date.getMonth() + 1;
			MM = MM < 10 ? '0' + MM : MM; //月补0
			let d = date.getDate();
			d = d < 10 ? '0' + d : d; //天补0
			let h = date.getHours();
			h = h < 10 ? '0' + h : h; //小时补0
			let m = date.getMinutes();
			m = m < 10 ? '0' + m : m; //分钟补0
			let s = date.getSeconds();
			s = s < 10 ? '0' + s : s; //秒补0
			return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
		},
		// 判断文件的类型
		getFileType(filename) {
			let previewUrl = '';
			let arr = filename.split('.');
			let len = arr.length;
			let ext = arr[len - 1].toLocaleLowerCase();
			if (ext == 'mp3') {
				// 音频
				previewUrl = '/static/nas-static/nas-new-music.png';
			}
			if (ext == 'doc' || ext == 'docx') {
				previewUrl = '/static/nas-static/nas-new-file.png';
			}
			if (ext == 'ppt' || ext == 'pptx') {
				previewUrl = '/static/nas-static/nas-new-file.png';
			}
			if (ext == 'pdf') {
				previewUrl = '/static/nas-static/nas-new-file.png';
			}
			if (ext == 'rar' || ext == 'zip' || ext == '7z' || ext == 'gz') {
				previewUrl = '/static/nas-static/nas-zip.svg';
			}
			if (ext == 'xls' || ext == 'xlsx') {
				previewUrl = '/static/nas-static/nas-new-file.png';
			}
			if (ext == 'txt') {
				previewUrl = '/static/nas-static/nas-new-file.png';
			}
			if (ext == 'mp4' || ext == 'mov') {
				previewUrl = '/static/nas-static/nas-new-video.png';
			}
			if (ext == 'jpg' || ext == 'png' || ext == 'jpeg') {
				previewUrl = '/static/nas-static/nas-new-pic.png';
			}
			if (previewUrl) {
				return previewUrl;
			} else {
				return '/static/nas-static/nas-new-pic.png';
			}
		},
		//生成随机数
		uuid() {
			let len = 8; //长度
			let radix = 8; //基数
			let chars = 'GHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
			let uuid = [],
				i;
			radix = radix || chars.length;
			if (len) {
				for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)];
			} else {
				let r = null;
				uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
				uuid[14] = '4';
				for (i = 0; i < 36; i++) {
					if (!uuid[i]) {
						r = 0 | (Math.random() * 16);
						uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r];
					}
				}
			}
			return uuid.join('');
		},
		/* 根据后缀判断文件类型 */
		getFileTypeByView(fileName) {
			let suffix = ''; // 后缀获取
			let result = ''; // 获取类型结果
			if (fileName) {
				const flieArr = fileName.split('.'); // 根据.分割数组
				suffix = flieArr[flieArr.length - 1]; // 取最后一个
			}
			if (!suffix) return false; // fileName无后缀返回false
			suffix = suffix.toLocaleLowerCase(); // 将后缀所有字母改为小写方便操作
			// 匹配图片
			const imgList = ['png', 'jpg', 'jpeg', 'bmp', 'gif']; // 图片格式
			result = imgList.find(item => item === suffix);
			if (result) return 'image';
			// 匹配txt
			const txtList = ['txt'];
			result = txtList.find(item => item === suffix);
			if (result) return 'txt';
			// 匹配excel
			const excelList = ['xls', 'xlsx'];
			result = excelList.find(item => item === suffix);
			if (result) return 'excel';
			// 匹配word
			const wordList = ['doc', 'docx'];
			result = wordList.find(item => item === suffix);
			if (result) return 'word';
			// 匹配pdf
			const pdfList = ['pdf'];
			result = pdfList.find(item => item === suffix);
			if (result) return 'pdf';
			// 匹配ppt
			const pptList = ['ppt', 'pptx'];
			result = pptList.find(item => item === suffix);
			if (result) return 'ppt';
			// 匹配zip
			const zipList = ['rar', 'zip', '7z'];
			result = zipList.find(item => item === suffix);
			if (result) return 'zip';
			// 匹配视频
			const videoList = ['mp4', 'm2v', 'mkv', 'rmvb', 'wmv', 'avi', 'flv', 'mov', 'm4v'];
			result = videoList.find(item => item === suffix);
			if (result) return 'video';
			// 匹配音频
			const radioList = ['mp3', 'wav', 'wmv'];
			result = radioList.find(item => item === suffix);
			if (result) return 'radio';
			// 其他文件类型
			return 'other';
		}
	}
};
</script>
<style lang="scss" scoped>
@import 'uview-ui/index.scss';

.nas-home {
	background: #1f1425;
	height: 100vh;
	overflow: hidden;
	padding-top: 50rpx;
	z-index: 9;
	/deep/ .u-subsection {
		height: 96rpx !important;
		border-radius: 48rpx !important;
		margin: 56rpx 104rpx;
	}
	/deep/ .u-item-bg {
		height: 72rpx !important;
		border-radius: 36rpx !important;
		bottom: 12rpx !important;
	}
	.nas-home-top {
		background: #1f1425;
		// border: 1rpx solid red;
		height: 94rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 104rpx;
		.tv-home-top-left {
			height: 94rpx;
			display: flex;
			.tv-left-img {
				image {
					width: 94rpx;
					height: 94rpx;
				}
			}
			.tv-left-two {
				.nas-home-top-title {
					display: flex;
					align-items: center;
					height: 48rpx;
					margin-left: 16rpx;
					image {
						width: 230rpx;
						height: 36rpx;
					}
				}
				.nas-home-top-right {
					height: 18rpx;
					margin-top: 8rpx;
					margin-left: 16rpx;
					image {
						width: 245rpx;
						height: 18rpx;
					}
				}
			}
		}
		.tv-right-top {
			// border: 1rpx solid red;
			width: 297rpx;
			height: 83rpx;
			background: #5c656e;
			border-radius: 42px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 36rpx;
			font-family: SourceHanSansCN-Regular, SourceHanSansCN;
			font-weight: 400;
			margin-right: 104rpx;
			color: #f1f1f1;
			.tv-right-img {
				width: 83rpx;
				height: 83rpx;
				border-radius: 42rpx;
				image {
					height: 100%;
					width: 100%;
				}
			}
			.tv-right-img-text {
				margin-right: 45rpx;
			}
		}
		.nas-bar-item {
			flex: 1;
			&:nth-of-type(1) {
				display: flex;
				align-items: center;
				margin-left: 0rpx;
				color: #3069dc;
				image {
					width: 70rpx;
					height: 54rpx;
				}
			}
			&:nth-of-type(2) {
				text-align: center;
				ont-family: HarmonyOS_Sans_SC_Medium;
				font-size: 54rpx;
				color: #fff;
				font-weight: 500;
			}
			&:last-of-type {
				text-align: right;
				margin-right: 32rpx;
				font-family: HarmonyOS_Sans_SC;
				font-size: 28rpx;
				color: #3069dc;
				font-weight: 400;
			}
		}
		// .nas-home-top-right {
		// 	margin-left: auto;
		// 	display: flex;
		// 	align-items: center;
		// }
		.nas-home-top-download {
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 174rpx;
			height: 48rpx;
			margin-right: 16rpx;
			background: rgba(48, 105, 220, 0.1);
			border-radius: 28rpx;
			font-family: HarmonyOS_Sans_SC;
			font-size: 24rpx;
			color: #3069dc;
			letter-spacing: 0;
			text-align: center;
			font-weight: 400;
			image {
				width: 24rpx;
				height: 26rpx;
			}
		}
		.nas-home-top-list {
			margin-right: 20rpx;
			width: 48rpx;
			height: 48rpx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			background: rgba(48, 105, 220, 0.1);
			image {
				width: 26rpx;
				height: 21rpx;
			}
		}
	}
	.tv-tab-all {
		background-color: #1f1425;
		display: flex;
		align-items: center;
		.tv-tab {
			width: 70%;
			// text-align: left;
			// border: 1rpx solid red;
			display: flex;
			align-items: center;
			height: 96rpx !important;
			// border-radius: 48rpx !important;
			margin: 56rpx 104rpx;
			justify-content: space-between;
			.tv-tab-item {
				background-color: #1f1425;
				width: 204rpx;
				// border: 1rpx solid red;
				height: 90rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 42rpx;
				color: #fff;
				border-radius: 48rpx !important;
				font-weight: bold;
				&:focus {
					transform: scale(1.3) !important;
					// border: 4rpx solid red !important;
					// box-shadow: 0 0 20rpx red !important;
					box-shadow: 0px 0px 10rpx #00bfff !important;
					outline: none;
				}
				&.active {
					background-color: #3069dc;
					// box-shadow: 0px 0px 10rpx red !important;
				}
			}
		}
		.tv-tab-qiehuan {
			// text-shadow: 0 0 10px red,0 0 20px red,0 0 30px red,0 0 40px red;
			display: flex;
			align-items: center;
			// justify-content: space-around;
			font-family: HarmonyOS_Sans_SC;
			font-size: 42rpx;
			color: #f1f1f1;
			letter-spacing: 0;
			font-weight: 400;
			width: 365rpx;
			height: 73rpx;
			background: #5c656e;
			border-radius: 42rpx;
			padding-left: 47rpx;
			// width: 161rpx;
			image {
				width: 50rpx;
				height: 50rpx;
				margin-right: 30rpx;
			}
		}
	}

	.nas-search {
		display: flex;
		align-items: center;
		height: 72rpx;
		background: #f5f5f5;
		margin: 28rpx 32rpx;
		border-radius: 40rpx;
		font-family: HarmonyOS_Sans_SC;
		font-size: 32rpx;
		color: #999999;
		letter-spacing: 0;
		font-weight: 400;
		.nas-search-left {
			width: 32rpx;
			height: 32rpx;
			margin-left: 27rpx;
			margin-right: 16rpx;
		}
	}
	.nas-sort {
		margin: 0 32rpx 28rpx 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.nas-sort-left {
			display: flex;
			align-items: center;
			justify-content: space-around;
			width: 184rpx;
			font-family: HarmonyOS_Sans_SC;
			font-size: 28rpx;
			color: #999999;
			letter-spacing: 0;
			font-weight: 400;
		}
		.nas-sort-left1 {
			width: 22rpx;
			height: 26rpx;
		}
		.nas-sort-left2 {
			width: 18rpx;
			height: 10rpx;
		}
		.nas-sort-right {
			display: flex;
			align-items: center;
			justify-content: space-around;
			font-family: HarmonyOS_Sans_SC;
			font-size: 28rpx;
			color: #999999;
			letter-spacing: 0;
			font-weight: 400;
			height: 40rpx;
			// width: 161rpx;
			image {
				width: 33rpx;
				height: 24rpx;
				margin-right: 16rpx;
			}
		}
	}
	.nas-add {
		position: absolute;
		right: 32rpx;
		bottom: 132rpx;
		image {
			width: 132rpx;
			height: 137rpx;
		}
	}
	.nas-body {
		position: absolute;
		// border: 1rpx solid red;
		top: 340rpx;
		bottom: 0rpx;
		right: 104rpx;
		left: 104rpx;
		width: auto;
		z-index: 9;
		// overflow-y: scroll !important;
		.tv-body {
			// position: absolute;
			// top: 0rpx;
			// margin: 0 30rpx;
			display: flex;
			justify-content: space-between;
			align-content: flex-start;
			flex-wrap: wrap;
			/* 和列表一样的宽度和margin值 */
			& > i {
				width: 420rpx;
				// margin-right: 10px;
			}
			// &::after {
			// 	flex: auto;
			// 	content: '';
			// }
			.nas-body-item {
				margin: 32rpx 0;
				height: 255rpx;
				width: calc(50% - 30rpx);
				display: flex;
				align-items: center;
				background-color: #585f66;
				padding-left: 40rpx;
				// padding-right: 10rpx;
				border-radius: 21rpx;
				&:focus {
					transform: scale(1.3) !important;
					// border: 4rpx solid red !important;
					// box-shadow: 0 0 20rpx red !important;
					box-shadow: 0px 0px 10rpx #00bfff !important;
					outline: none;
				}
				.nas-body-image {
					image {
						width: 160rpx;
						height: 160rpx;
					}
				}
				.nas-body-left-right {
					// border: 1rpx solid red;
					margin-left: 46rpx;
					view {
						max-width: 600rpx;
						&:first-of-type {
							letter-spacing: 0;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							font-size: 36rpx;
							font-family: SourceHanSansCN-Normal, SourceHanSansCN;
							font-weight: 400;
							color: #f1f1f1;
						}
						&:last-of-type {
							font-family: HarmonyOS_Sans_SC;
							margin-top: 20rpx;
							font-size: 24rpx;
							color: #f1f1f1;
							letter-spacing: 0;
							font-weight: 400;
						}
					}
				}
				.nas-body-right-circle {
					margin-left: auto;
					width: 38rpx;
					height: 38rpx;
					image {
						width: 38rpx;
						height: 38rpx;
					}
				}
			}
		}
	}

	.nas-body-sl1 {
		// position: absolute;
		// top: 0rpx;
		margin: 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-content: flex-start;
		flex-wrap: wrap;
		/* 和列表一样的宽度和margin值 */
		& > i {
			width: 420rpx;
			// margin-right: 10px;
		}
		// &::after {
		// 	flex: auto;
		// 	content: '';
		// }
	}
	.nas-body-sl {
		position: absolute !important;
		top: 340rpx;
		bottom: 0rpx;
		right: 32rpx !important;
		left: 32rpx !important;
		width: auto;
		overflow-y: scroll;
		.nas-body-item-sl {
			width: 420rpx;
			height: 420rpx;
			background: #f2f2f2;
			border-radius: 21rpx;
			margin-top: 26rpx;
			&:focus {
				transform: scale(1.3) !important;
				// border: 4rpx solid red !important;
				// box-shadow: 0 0 20rpx red !important;
				box-shadow: 0px 0px 10rpx #00bfff !important;
				outline: none;
			}
			.nas-body-in-sl {
				background: #5c656e;
				height: 260rpx;
				border-top-left-radius: 21rpx;
				border-top-right-radius: 21rpx;
				// margin: 16rpx 16rpx 0 16rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				.nas-dir {
					width: 180rpx;
					height: 180rpx;
				}
				.image {
					width: 180rpx;
					height: 180rpx;
				}
			}
			.nas-body-sl-bottom {
				// border: 1rpx solid red;
				height: 160rpx;
				width: 100%;
				background: #585f66;
				padding: 8rpx 20rpx 0rpx 20rpx;
				border-bottom-left-radius: 21rpx;
				border-bottom-right-radius: 21rpx;
				// margin: 16rpx 16rpx 0 16rpx;
			}
			.nas-body-sl-left {
				max-width: 360rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				font-size: 36rpx;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #fff;
				&:last-of-type {
					font-size: 26rpx;
					margin-top: 20rpx;
					font-family: MicrosoftYaHeiUI;
					color: #f1f1f1;
				}
			}
			.nas-body-right-circle {
				margin-left: auto;
				width: 38rpx;
				height: 38rpx;
				image {
					width: 38rpx;
					height: 38rpx;
				}
			}
			&:nth-of-type(2n-1) {
				// margin-left: 10rpx;
			}
			&:nth-of-type(2n) {
				// border: 1rpx solid red;
				// margin-left: 30rpx;
			}
		}
	}
	.nas-popup-bottom-item {
		padding: 22rpx 32rpx 22rpx 32rpx;
		height: 110rpx;
		display: flex;
		align-items: center;
		font-family: HarmonyOS_Sans_SC;
		font-size: 28rpx;
		color: #333333;
		font-weight: 400;
		image {
			width: 36rpx;
			height: 34rpx;
			margin-right: 16rpx;
		}
		&.active {
			color: #3069dc;
		}
		&:first-of-type {
			margin-bottom: 0rpx;
		}
		&:nth-of-type(2) {
			border-top: 1rpx solid #d8d8d8;
		}
		&:last-of-type {
			margin-top: 0rpx;
			border-top: 1rpx solid #d8d8d8;
		}
	}
	.nas-more-bottom {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 150rpx;
		background: #3069dc;
		border-radius: 16rpx;
		padding-top: 20rpx;
		display: flex;
		justify-content: space-around;
		.nas-more-bottom-item {
			width: 84rpx;
			font-family: HarmonyOS_Sans_SC;
			font-size: 28rpx;
			color: rgba(255, 255, 255, 0.9);
			text-align: center;
			font-weight: 500;
			.nas-more-bottom-img {
				width: 32rpx;
				height: 36rpx;
			}
		}
	}
	.nas-content {
		padding: 32rpx;
		text-align: center;
		font-family: HarmonyOS_Sans_SC;
		font-size: 28rpx;
		color: #808080;
		letter-spacing: 0;
		font-weight: 400;
	}
	.nas-unregistered {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		padding-top: 200rpx;
		background: #fff;
		overflow: hidden;
		.nas-unregistered-img {
			display: flex;
			justify-content: center;
			image {
				width: 599rpx;
				height: 394rpx;
			}
		}
		.nas-unregistered-title {
			margin: 40rpx 0;
			font-family: HarmonyOS_Sans_SC_Medium;
			font-size: 36rpx;
			color: #4c4c4c;
			text-align: center;
			font-weight: 500;
		}
		.nas-unregistered-tip {
			font-family: HarmonyOS_Sans_SC;
			font-size: 28rpx;
			color: #3069dc;
			text-align: center;
			font-weight: 400;
		}
	}
	.nas-login {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		padding-top: 108rpx;
		background: #fff;
		overflow: hidden;
		.nas-login-img {
			text-align: center;
			image {
				width: 176rpx;
				height: 108rpx;
			}
		}
		.nas-login-title {
			margin-top: 44rpx;
			text-align: center;
			image {
				width: 296rpx;
				height: 48rpx;
			}
		}
		.nas-login-password {
			margin: 44rpx 95rpx;
		}
		.nas-login-button {
			margin: 120rpx 95rpx 0 95rpx;
			height: 80rpx;
			background: #3069dc;
			border-radius: 40rpx;
			color: #fff;
			font-family: HarmonyOS_Sans_SC;
			font-size: 32rpx;
			color: #ffffff;
			text-align: center;
			font-weight: 400;
		}
		.nas-login-rule {
			text-align: center;
			margin: 21rpx 134rpx;
			font-family: HarmonyOS_Sans_SC;
			font-size: 24rpx;
			color: #808080;
			text-align: justify;
			font-weight: 400;
		}
	}
}
</style>
